<template>
    <el-tabs v-model="activeName2" class="demo-tabs" @tab-click="handleClick3">
      <el-tab-pane label="User" name="first">
  
  
  
  
  
        <div class="common-layout">
      <el-container>
        <el-aside width="300px">
  
        </el-aside>
        <el-container>
          <el-header>Header</el-header>
          <el-main>
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="血压监测" name="first">
          <el-form label-width="auto" style="max-width: 100%">
              <el-row>
                  <el-col :span="5">
              <el-form-item label=" 身份证号:">
                  <el-input
                    v-model="queryDto.idnumber"
                    placeholder="身份证号"
                  ></el-input>
              </el-form-item>
              
              </el-col>
              <el-col :span="10">
              <el-form-item label="上传日期:">
        <el-date-picker
          v-model="createTimes"
          type="daterange"
          unlink-panels
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :shortcuts="shortcuts"
          :size="size"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
              </el-form-item>
                  </el-col>
                  <el-col :span="8">
                  <el-form-item label="状态:">
                      <el-select
                      v-model="queryDto.storeid"
                      placeholder="状态"
                      size="large"
                      style="width: 240px"
                      >
                      <el-option
                          v-for="item in options"
                          :key="item.id"
                          :label="item.store"
                          :value="item.id"
                      />
                      </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="8">
              <el-form-item label=" 姓名:">
                  <el-input
                    v-model="queryDto.name"
                    placeholder="姓名"
                  ></el-input>
              </el-form-item>
          </el-col>
              </el-row>
              
      <el-row style="display:flex">
          <el-button type="primary" size="small" @click="searchSysRole">
              搜索
          </el-button>
          <el-button size="small" @click="resetData">重置</el-button>
      </el-row>
  </el-form>
           <!--- 角色表格数据 -->
           <el-table  :data="list" border  style="width: 100%">
                      <el-table-column prop="id" label="序号" width="60" />
                      <el-table-column prop="name" label="患者姓名" width="90" />
                      
                      <el-table-column prop="sex" label="性别"  width="60"  #default="scope">
                          {{ scope.row.sex == 1 ? '男' : '女' }}
                      </el-table-column>
                      <el-table-column prop="age" label="年龄" width="60"/>
                      <el-table-column prop="idnumber" label="身份证号" width="180"/>
                      <el-table-column prop="phone" label="联系方式"/>
                      <el-table-column prop="ccompression" label="收缩压" />
                      <el-table-column prop="dpressure" label="舒张压"  width="80" />
                      <el-table-column prop="pulse" label="脉搏"  width="80" />
                      <el-table-column prop="dateOfSurvey" label="测量日期"  width="180" />
                      <el-table-column prop="store" label="预警"  width="80" />
                      <el-table-column prop="dataSources" label="数据来源"  width="80" />
                  </el-table>
                  <!--分页条-->
                  <el-pagination
                 v-model:current-page="pageParams.page"
                 v-model:page-size="pageParams.limit"
                 :page-sizes="[2,5,10, 20, 50, 100]"
                 @size-change="fetchData"
                 @current-change="fetchData"
                 layout="total, sizes, prev, pager, next"
                 :total="total"
  />
        </el-tab-pane>
  
  
  
  
        <el-tab-pane label="血糖监测" name="second">
          <el-form label-width="auto" style="max-width: 100%">
              <el-row>
                  <el-col :span="5">
              <el-form-item label=" 身份证号:">
                  <el-input
                    v-model="queryDto1.idnumber"
                    placeholder="身份证号"
                  ></el-input>
              </el-form-item>
              
              </el-col>
              <el-col :span="10">
              <el-form-item label="上传日期:">
        <el-date-picker
          v-model="createTimes1"
          type="daterange"
          unlink-panels
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :shortcuts="shortcuts"
          :size="size"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
              </el-form-item>
                  </el-col>
                  <el-col :span="8">
                  <el-form-item label="状态:">
                      <el-select
                      v-model="queryDto1.storeid"
                      placeholder="状态"
                      size="large"
                      style="width: 240px"
                      >
                      <el-option
                          v-for="item in options1"
                          :key="item.id"
                          :label="item.store"
                          :value="item.id"
                      />
                      </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="8">
              <el-form-item label=" 姓名:">
                  <el-input
                    v-model="queryDto1.name"
                    placeholder="姓名"
                  ></el-input>
              </el-form-item>
          </el-col>
              </el-row>
              
      <el-row style="display:flex">
          <el-button type="primary" size="small" @click="searchSysRole1">
              搜索
          </el-button>
          <el-button size="small" @click="resetData1">重置</el-button>
      </el-row>
  </el-form>
           <!--- 角色表格数据 -->
           <el-table :data="list1" border style="width: 100%">
                      <el-table-column prop="id" label="序号" width="60" />
                      <el-table-column prop="name" label="患者姓名" width="100" />
                      
                      <el-table-column prop="sex" label="性别"  width="60"  #default="scope">
                          {{ scope.row.sex == 1 ? '男' : '女' }}
                      </el-table-column>
                      <el-table-column prop="age" label="年龄"/>
                      <el-table-column prop="idnumber" label="身份证号"/>
                      <el-table-column prop="phone" label="联系方式"/>
                      <el-table-column prop="fbglucose" label="空腹血糖" />
                      <el-table-column prop="dateOfSurvey" label="测量日期"  width="180" />
                      <el-table-column prop="store" label="预警"  width="80" />
                      <el-table-column prop="dataSources" label="数据来源"  width="80" />
                  </el-table>
                  <el-pagination
                 v-model:current-page="pageParams1.page"
                 v-model:page-size="pageParams1.limit"
                 :page-sizes="[2,5,10, 20, 50, 100]"
                 @size-change="fetchData2"
                 @current-change="fetchData2"
                 layout="total, sizes, prev, pager, next"
                 :total="total1"
  />
        </el-tab-pane>
      </el-tabs>
    </el-main>
        </el-container>
      </el-container>
        
    </div>
  
  
  
  
      </el-tab-pane>
      <el-tab-pane label="Config" name="second">Config</el-tab-pane>
      <el-tab-pane label="Role" name="third">Role</el-tab-pane>
      <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
    </el-tabs>
  
      
    </template>
    <script lang="ts" setup>
    import { ref,onMounted } from 'vue'
    import type { TabsPaneContext } from 'element-plus'
    import { ElMessage, ElMessageBox } from 'element-plus'
  import {GetSysRoleListByPage1,GetSysRoleListByPage2,findstore} from '@/api/zsg/intervention';
    
    const activeName = ref('first')
  const activeName1 = ref('first')
  const activeName2 = ref('first')
    const options=ref({})
    const options1=ref({})
    const handleClick = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event)
    }
    const handleClick1 = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
  }
  const handleClick3 = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event)
    }
  // 分页条总记录数
  let total = ref(0)
  let total1 = ref(0)
  
  // 定义表格数据模型
  let list = ref([
  ])
  let list1 = ref([
  ])
  let tit=ref("")
  const dialogVisible=ref(false)
  const pageParamsForm={
      page:1,
      limit:2,
  }
  const pageParamsForm1={
      page:1,
      limit:2,
  }
  const pageParams = ref(pageParamsForm)     // 将pageParamsForm包装成支持响应式的对象
  const pageParams1 = ref(pageParamsForm1)     // 将pageParamsForm包装成支持响应式的对象
  // 搜索表单数据
  const queryDto = ref({
  })
  const queryDto1 = ref({
  })
  // 页面加载完毕以后请求后端接口获取数据
  onMounted(() => {
      fetchData() ;
      fetchData2() ;
      findstores();
      findstores1();
  })
  const createTimes=ref({})
  const createTimes1=ref({})
  const findstores=async()=>{
    const {data , code , message } = await findstore()
    options.value=data;
  
  }
  const findstores1=async()=>{
    const {data , code , message } = await findstore()
    options1.value=data;
  
  }
  // 搜索按钮点击事件处理函数
  const searchSysRole = () => {
      //queryDto.value.roleName = ""
      let initialtime=createTimes.value[0];
      let endtime=createTimes.value[1];
      queryDto.value.initialtime=initialtime;
      queryDto.value.endtime=endtime;
      console.log(queryDto.value)
      fetchData() ;
  }
  const searchSysRole1 = () => {
      //queryDto.value.roleName = ""
      let initialtime=createTimes1.value[0];
      let endtime=createTimes1.value[1];
      queryDto1.value.initialtime=initialtime;
      queryDto1.value.endtime=endtime;
      console.log(queryDto.value)
      fetchData2() ;
  }
  // 远程调用后端分页查询接口
  const fetchData = async () => {
      const {data , code , message } = await GetSysRoleListByPage1(pageParams.value.page , pageParams.value.limit , queryDto.value) ;
      console.log(data)
      list.value = data.list ;
      total.value = data.total
      // for(let a=0;a<=data.list.length;a++){
      //     if(data.list[a].sex=='1'){
      //         list.value[a].sex='男'
      //     }else{
      //         list.value[a].sex='女'
      //     }
          
      // }
  }
  const fetchData2 = async () => {
      const {data , code , message } = await GetSysRoleListByPage2(pageParams1.value.page , pageParams1.value.limit , queryDto1.value) ;
      console.log(data)
      list1.value = data.list ;
      total1.value = data.total
      // for(let a=0;a<=data.list.length;a++){
      //     if(data.list[a].sex=='1'){
      //         list.value[a].sex='男'
      //     }else{
      //         list.value[a].sex='女'
      //     }
          
      // }
  }
  const resetData=()=>{
      queryDto.value={}
      createTimes.value={}
  }
  const resetData1=()=>{
      queryDto1.value={}
      createTimes1.value={}
  }
    </script>
    
    <style>
    .demo-tabs > .el-tabs__content {
      padding: 32px;
      color: #6b778c;
      font-size: 32px;
      font-weight: 600;
    }
    </style>
    